<template>
    <div>
        <!-- 游戏横条 -->
        <div class="w-full flex items-center group mt-6">
            <div
                class="h-[1px] flex-1 bg-gradient-to-r from-transparent via-emerald-400/60 dark:via-emerald-600 to-transparent transition-all duration-500 group-hover:via-emerald-600 dark:group-hover:via-emerald-400">
            </div>
            <div class="mx-4 whitespace-nowrap flex items-center">
                <span
                    class="text-emerald-600 bg-emerald-50 dark:bg-emerald-900 dark:text-emerald-200 px-3 py-1 rounded-full text-sm font-medium ring-1 ring-inset ring-emerald-100 dark:ring-emerald-800">
                    <span class="mr-2">🎮</span>游戏
                </span>
            </div>

            <div
                class="h-[1px] flex-1 bg-gradient-to-l from-transparent via-emerald-400/60 dark:via-emerald-600 to-transparent transition-all duration-500 group-hover:via-emerald-600 dark:group-hover:via-emerald-400">
            </div>
        </div>

        <!-- 2048 -->
        <div class="w-full flex flex-row mt-6">
            <div class="w-1/2 ml-2" @click="navigateTo('/2048')">
                <div class="flex flex-row h-full">
                    <div class="w-full card-name1 bg-gradient-to-br from-purple-400 to-pink-400 dark:from-purple-700 dark:to-pink-700 flex flex-col h-full justify-center items-center p-6 rounded-3xl 
         hover:from-purple-600 hover:to-pink-600 dark:hover:from-purple-800 dark:hover:to-pink-800 relative transition-all duration-300
         shadow-lg hover:shadow-xl dark:shadow-gray-800/50 border border-white/20 dark:border-gray-600">
                        <span
                            class="text-sm absolute top-0 left-0 pl-2 pt-2 text-slate-300 dark:text-gray-400 underline">stats</span>
                        <span
                            class="text-2xl pt-3 text-slate-100 dark:text-gray-100 font-medium tracking-tight">2048</span>
                    </div>
                    <div
                        class="mr-3 card-line1 flex justify-center items-center w-[2px] ml-3 bg-gradient-to-b from-slate-300 to-slate-400/50 dark:from-gray-600 dark:to-gray-500">
                    </div>
                </div>
            </div>
            <div class="w-1/2 mr-2">
                <div class="relative flex flex-col justify-center items-center w-full p-5 bg-slate-100 dark:bg-gray-800 h-full rounded-2xl
       shadow-inner border border-slate-200 dark:border-gray-700">
                    <span class="absolute top-0 left-0 pl-2 pt-1 text-slate-500 dark:text-gray-400 text-sm">data</span>
                    <span class="pt-3 text-slate-700 dark:text-gray-300 leading-relaxed">PageNotFound</span>
                </div>
            </div>
        </div>
    </div>

</template>

<script setup lang="ts">

import { useRouter } from 'vue-router';
let router = useRouter()

function navigateTo(path: string) {
    router.push(path)
}

</script>

<style scoped>
/* 紧跟在name之后用+  */
/* 默认浅色模式颜色 */
.card-name1:hover+.card-line1 {
    background-color: #ad1b81;
    /* 浅色模式颜色 */
    /* transition: background-color 0.3s ease; */
    background-image: none;
    /* 添加过渡动画 */
}

/* 深色模式覆盖 */
.dark .card-name1:hover+.card-line1 {
    background-color: #e31717;
    /* 深色模式颜色（青色） */
    background-image: none;
    /* 移除渐变背景 */
}
</style>